<template>
  <div class="home">
    <div class="header"></div>
    <div class="img">
      <div class="text">
        <div class="time">
          {{ time | filterTime }}
        </div>
        <div class="site">
          <i class="el-icon-location x"></i> {{ site.addressComponent.city }}
        </div>
      </div>
    </div>
    <div class="center">
      <p>习惯是一点一滴累计的</p>
      <p>上下班时间 <span>09:00,18.00</span></p>
      <p style="color: gray; font-size: 14px">
        如遇补卡或其他异常情况，请及时联系项目经理
      </p>
    </div>
    <div class="button">
      <van-button square type="primary" @click="punchCard"
        ><p>打卡</p>
        <p><Time /></p
      ></van-button>
      <p>点击打卡</p>
    </div>
  </div>
</template>
<script>
import Time from "../../components/time.vue";
import { addCard } from "../../api/mine";
import axios from "axios";
import Vue from "vue";
import { NavBar } from "vant";
Vue.use(NavBar);
import { Toast } from "vant";
Vue.use(Toast);
Toast.setDefaultOptions({ duration: 2000 });

export default {
  components: {
    Time,
  },
  data() {
    return {
      time: new Date(),
      phone: JSON.parse(localStorage.getItem("phones")),
      nowDate: "",
      site: {addressComponent:{city:''},formattedAddress:''},
      city: "",
    };
  },
  mounted() {
    this.map();
  },
  methods: {
    // 打卡按钮
    punchCard() {
       const self = this;
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日

      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${hour}:${minute}:${second}`;
      if (this.phone == null) {
        this.$router.push({
          path: "/mine",
        });
      } else {
        let punchingCardDto = {
          clockTimeIn: `${hour}:${minute}:${second}`,
          locationPunchIn: `${this.site.formattedAddress}`,
          printingDate: `${year}-${month}-${day}`,
          projectId: this.phone.projectId,
          userId: this.phone.userId,
        };
        addCard(punchingCardDto).then((res) => {
          Toast({
            message: `打卡成功\n\n\n${year + "/" + month + "/" + day}\n\n${
              this.nowDate
            }`,
            icon: "success",
          });
        });
      }
    },
    // 获取位置
    map() {
      const self = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
        });

        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            onComplete(result);
          } else {
            onError(result);
          }
        });
        
        function onComplete(data) {
          // data是具体的定位信息
          console.log(data, "具体的定位信息");
          self.site = data;
        }

        function onError(data) {
          // 定位出错
        }
      });
    },
    
  },
  // 过滤器
  filters: {
    // 过滤时间格式
    filterTime() {
      let value = new Date();
      let Y = value.getFullYear(); //年
      let M = value.getMonth() + 1; //月
      let D = value.getDate(); //日
      return Y + "/" + M + "/" + D;
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
}
.img {
  margin: 0;
  width: 100%;
  height: 300px;
  background: url("https://img2.baidu.com/it/u=1311397381,1789120980&fm=26&fmt=auto")
    no-repeat;
  background-size: 100% 100%;
  .text {
    color: white;
    font-weight: 700;
    padding: 15px 0 0 15px;
  }
}
.center {
  padding: 20px 0 0 20px;
  p {
    font-weight: 600;
  }
  span {
    color: #44b0b8;
    font-weight: 700;
  }
}
.button {
  width: 100%;
  height: 360px;
  text-align: center;
  position: absolute;
  top: 50%;
  .van-button {
    width: 200px;
    height: 200px;
    border: 6px solid #e7e6e5;
    border-radius: 50%;
    background-color: #3fac9d;
    p {
      color: white;
      font-size: 25px;
      font-weight: 700;
    }
  }
  p {
    color: #3fac9d;
  }
}
</style>
